<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .li {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <!-- 
        - 需求：实现评论列表功能

        - 如果有评论数据，就展示列表结构 li（ 列表渲染 ）要包含a标签

        - name 表示评论人，渲染 h3
        - content 表示评论内容，渲染 p

        - 如果没有评论数据，就展示一个 h1 标签，内容为： 暂无评论！

        - 根据自己的喜好添加样式

        - 给a标签注册点击事件, 打印内容 -->
    <script type="text/babel">
      const list = [
        { id: 1, name: 'jack', content: 'rose, you jump i jump' },
        { id: 2, name: 'rose', content: 'jack, you see you, one day day' },
        { id: 3, name: 'tom', content: 'jack,。。。。。' },
      ]

      //   需求一: 根据数据创建无序列表(根据list数组,得到一个li>a>h3+p的一个新数组)

      const ul = (
        <ul>
          {list.map((item) => {
            return (
              //  需求三: 添加样式
              <li key={item.id} className="li">
                <a
                  href=""
                  onClick={function (e) {
                    e.preventDefault()
                    //如果是a标签,就return
                    // console.dir(e.target)
                    if (e.target.nodeName === 'A') return
                    console.log(e.target.innerText)
                    // return false 无效,因为我们写的函数不是真正的事件处理函数
                  }}
                >
                  <h3 style={{ backgroundColor: 'red' }}>{item.name}</h3>
                  <p style={{ backgroundColor: 'yellow' }}>{item.content}</p>
                </a>
              </li>
            )
          })}
        </ul>
      )
      // 需求二: 有数据展示ul,没有数据展示h1
      const div = <div>{list.length ? ul : <h1>暂无评论</h1>}</div>

      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
